<template>
  <edit-form ref="form" label-width="calc(5em + 12px)" :model="form" :fields="fields" :rules="rules">
    <template #item-cpyj>
      <div class="yq-approval__suggestion">
        <el-input type="textarea" rows="3" v-model="form.cpyj" maxlength="2000" show-word-limit></el-input>
      </div>
    </template>

    <template #item-reporter>
      <div v-show="isLoaded">
        <div v-for="item in cprList" :key="item.id">
          {{ item.name }}
          <dg-checkbox-group
            class="yq-approval__director-list"
            v-model="form[item.key]"
            :data="item.data"
            @change="(val) => selsectReporter(val)"
          ></dg-checkbox-group>
        </div>
      </div>
    </template>
  </edit-form>
</template>
<script>
import EditForm from '@@/edit-form';
import { BM_CPLX } from '@/common/codeDic';
import { flowPostApprovalZhbld, flowPostApprovalJld, flowPostApproval } from '@/api/common';
export default {
  name: 'Approval',
  components: {
    EditForm
  },
  data() {
    return {
      isLoaded: false,
      BM_CPLX,
      form: {
        cpyj: '',
        cplx: '1',
        reporter: [],
        psrList: {}
      },
      originCbrList: [],
      rules: {
        cpyj: [{ required: true, message: '请输入呈批意见', trigger: 'blur' }],
        reporter: [{ required: true, message: '请选择呈报人', trigger: 'blur' }]
      },
      fields: [
        {
          prop: 'cpyj',
          label: '呈批意见'
        },
        {
          prop: 'reporter',
          label: '呈报人'
        }
      ],
      zhbList: [],
      jldList: []
    };
  },
  computed: {
    cbyj() {
      return this.$route.params.cbyj || '';
    },
    cprList() {
      let result = [{
        key: 'jld',
        id: '1',
        data: [{
          label:'张三',
          value: '1111'
        }],
        name: '局领导'
      },{
        key: 'zbcz',
        id: '2',
        data: [{
          label:'值班处长1111',
          value: '1111'
        }],
        name: '值班处长'
      },{
        key: 'zbzr',
        id: '3',
        data: [{
          label:'张三',
          value: '1111'
        }],
        name: '值班主任'
      }];
      return result;
    },
    flowId() {
      return this.$route.params.id || '';
    }
  },
  async created() {
    this.form.cpyj = this.cbyj;
  },
  methods: {
    async onSubmit() {
      const valid = await new Promise((resolve) => this.$refs.form.validate(resolve));
      if (!valid) return;

      // 获取当前选中的呈批人姓名
      const getCbrList = (fields) => {
        let list = [];
        fields.forEach((field) => {
          const fieldList = this.form[field].split(',');
          fieldList.forEach((key) => {
            const obj = this.originCbrList.find((item) => item.value === key);
            obj
              ? list.push({
                  psrId: obj.id,
                  psrName: obj.label
                })
              : '';
          });
        });
        return list;
      };
      const psrList = +this.form.cplx === 1 ? getCbrList(['jld']) : getCbrList(['zr', 'cz', 'fcz']);
      const params = {
        ...this.form,
        flowId: this.flowId,
        psrList
      };
      flowPostApproval(params).then((res) => {
        this.$message({
          message: '呈批成功',
          type: 'success'
        });
        this.$router.go(-1);
      });
    },
    selsectReporter(val) {
      this.form.reporter = val;
      if (val) this.$refs.form.$refs.form.clearValidate('reporter');
    }
  }
};
</script>
